<template>
  <div>
    <a-tabs default-active-key="0" type="card" @change="tabsChange">
      <a-tab-pane key="0" tab="字段管理">
        <ZgNewPage ref="page" :pageOpt="pageOpt" @search="onSearch">
          <template slot="columns">
            <a-table-column title="字段名称" dataIndex="name"></a-table-column>
            <a-table-column title="字段编码" dataIndex="code"></a-table-column>
            <a-table-column title="字段类型">
              <template slot-scope="record">
                <a-select
                  style="width: 100%;"
                  v-model="record.singleType"
                  @change="selectChange(record)"
                  placeholder="请选择字段类型">
                  <a-select-option v-for="o in typeList" :key="o.value" :value="o.value">
                    {{ o.label }}
                  </a-select-option>
                </a-select>
              </template>
            </a-table-column>
          </template>
        </ZgNewPage>
      </a-tab-pane>
      <a-tab-pane key="1" tab="模版管理">
        <a-row :gutter="10" v-if="templateId">
          <a-col :span="4">
            <a-tabs
              tab-position="left"
              v-model="templateId"
              type="editable-card"
              @edit="onEditView"
              @change="tempTabsChange"
              :tabBarStyle="{ width: '100%' }">
              <a-tab-pane v-for="obj in tabsList" :key="obj.id" style="width:100%;">
                <template #tab>
                  <span class="tabs-text">{{ obj.name }}</span>
                </template>
              </a-tab-pane>
            </a-tabs>
          </a-col>
          <a-col :span="20">
            <ZgNewPage
              ref="moudlePage"
              :pageOpt="moudlePageOpt"
              :batchBtns="batchBtns"
              :addBtnName="addBtnName"
              addBtnIcon="plus"
              :title="templateName"
              :isShowPagination="false"
              @search="onMoudleSearch"
              @batch="toBatch"
              @add="open('addTemplate')">
              <template slot="columns">
                <a-table-column title="文件名称">
                  <template slot-scope="record">
                    {{ record.name }}
                  </template>
                </a-table-column>
                <a-table-column title="文件类型">
                  <template slot-scope="record">
                    {{ record.type }}
                  </template>
                </a-table-column>
                <a-table-column title="文件排序">
                  <template slot-scope="record">
                    {{ record.sort }}
                  </template>
                </a-table-column>
                <a-table-column title="操作" :width="100" align="center">
                  <template slot-scope="record">
                    <a-button type="link" block v-if="record.pdfUrl" @click="getFile(record)">预览</a-button>
                  </template>
                </a-table-column>
              </template>
            </ZgNewPage>
          </a-col>
        </a-row>
        <a-empty v-else>
          <template #description>
            <span>暂无模板数据</span>
          </template>
          <a-button type="primary" @click="onEditView(null,'add')">添加模板</a-button>
        </a-empty>
      </a-tab-pane>
    </a-tabs>
    <Add ref="add" :formId="formId" @ok="getTabsList"></Add>
    <AddTemplate ref="addTemplate" :tmplId="templateId" @ok="onMoudleSearch"></AddTemplate>
  </div>
</template>
<script>
import Add from './Add'
import AddTemplate from './AddTemplate'
export default {
  components: {
    Add, AddTemplate
  },
  props: {
    formId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
       pageOpt: {
        showSearchBtn: true,
        showRefreshBtn: true,
        showConditionBtn: false,
        showDataCheck: false,
        showPageTitle: false
      },
      moudlePageOpt: {
        showSearchBtn: false,
        showRefreshBtn: false,
        showConditionBtn: false,
        showDataCheck: true,
        showPageTitle: true
      },
      typeList: [
        { value: '单数', label: '单数' },
        { value: '复数', label: '复数' },
        { value: '拆分', label: '拆分' }
      ],
      batchBtns: [
        { key: 1, label: '批量删除' }
      ],
      addBtnName: '新增',
      tabsList: [],
      templateId: '',
      templateName: '',
      moudlePageData: []
    }
  },
  mounted () {
  },
  methods: {
    onSearch (param) {
      const param1 = Object.assign({ formId: this.formId }, param)
      this.$http.get('/zg-autoform/column/page', param1, data => {
        this.$refs.page.endSearch(
          {
            total: parseInt(data.total),
            list: data.records.map(t => {
              t.key = t.id
              return t
            })
          }
        )
      })
    },
    onEditView (targetKey, action) {
      if (action === 'add') {
        this.open('add')
      } else {
        this.confirm(
          () => {
            this.$http.post('/zg-autoform/tmpl/del', { ids: [targetKey] }, () => {
              this.getTabsList('delete', targetKey)
            })
          },
          '确定要删除这条数据么'
        )
      }
    },
    open (type) {
      this.$refs[type].open()
    },
    tabsChange (key) {
      if (key === '1') {
        this.templateId = ''
        this.templateName = ''
        this.getTabsList()
      }
    },
    getTabsList (type, key) {
      this.$http.post('/zg-autoform/tmpl/list', { formId: this.formId }, data => {
        this.tabsList = data
        if (data.length) {
          if (type === 'delete') {
            if (key === this.templateId) {
             this.templateId = data ? data[0].id : ''
              this.templateName = data ? data[0].name : ''
              this.onMoudleSearch()
            }
            return
          }
          this.templateId = data ? data[0].id : ''
          this.templateName = data ? data[0].name : ''
          if (type === 'add') {
            this.onMoudleSearch()
          }
        }
      })
    },
    onMoudleSearch () {
      this.showAddTemplate = false
      if (this.templateId) {
        this.$http.post('/zg-autoform/tmplFile/list', { tmplId: this.templateId }, data => {
          this.moudlePageData = data
          this.$refs.moudlePage.endSearch(
            {
              total: parseInt(data.length),
              list: data.map(t => {
                t.key = t.id
                return t
              })
            }
          )
        })
      } else {
        this.$refs.moudlePage.endSearch(
          {
            total: 0,
            list: []
          }
        )
      }
    },
   toBatch (opt) {
      if (opt.key === 1) {
        this.$refs.moudlePage.checkIds(ids => {
          const params = []
          this.moudlePageData.forEach((item, i) => {
            if (ids.includes(i)) {
              params.push(item.id)
            }
          })
          this.$http.post('/zg-autoform/tmplFile/del', { ids: params }, () => {
            this.onMoudleSearch()
          })
        }, '确定要批量删除这些数据')
      }
    },
    tempTabsChange (key) {
      this.templateId = key
      this.templateName = this.tabsList.find(t => t.id === key).name
      this.onMoudleSearch()
    },
    selectChange (record) {
      console.log(record)
      this.$http.post('/zg-autoform/column/update', record, () => {})
    },
    getFile (record) {
      // 新窗口打开
      const elink = document.createElement('a')
      elink.href = this.MINIO_URL + record.pdfUrl
      elink.target = '_blank'
      elink.style.display = 'none'
      document.body.appendChild(elink)
      elink.click()
      document.body.removeChild(elink)
    }
  }
}
</script>

<style lang="scss" scoped>
  .tabs-text{
    float:left;
    width: 92%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
